<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>平台费率详情</title>
		<script src="js/lib/vue.min.js"></script>
		<script src="js/lib/jquery-1.11.0.js"></script>
		<style type="text/css">
		ul,li{
			margin: 0;
			padding: 0;
			list-style: none;
		}
			.product{
				width: 100%;
				display: flex;
				border:0.5px solid #c7c7c7;
			}
			.product_left{
				flex: 0 0 200px;
				width: 200px;
			}
			.product_right{
				width: 100%;
			}
			.product_title{
				height: 40px;
				line-height: 40px;
				width: 100%;
				text-align: center;
				border-bottom:0.5px solid #c7c7c7;
			}
			.product_title_ul{
				text-align: center;
			}
			.product_title_ul li{
				height: 40px;
				line-height: 40px;
				border-bottom:0.5px solid #c7c7c7;
			}
			.product_right_top>ul{
				display: flex;
				padding: 0;
				margin: 0;
			}
			.product_right_top>ul>li{
				flex: 1;
				text-align: center;
				list-style: none;
				height: 40px;
				line-height: 40px;
				border-bottom:0.5px solid #c7c7c7;
			}

			.product_right_rate{
				text-align: center;
				border-left:0.5px solid #c7c7c7;
			}
			.product_right_rate li{
				border-bottom:0.5px solid #c7c7c7;
			}
		</style>
	</head>
	<body >
		<div id="box" style="width:80%">
			<div class="product">
				<div class="product_left">
					<div class="product_title">通道名称</div>
					<ul class="product_title_ul">
						<li v-for="item in rateList"  v-show="item.status == 1 || item.name == '信用卡消费'">{{item.name}}</li>
					</ul>
				</div>
				<div class="product_right">
					<div class="product_right_top">
						<ul>
							<li v-for="item in prodList">
								<div>{{item.name}}</div>
								<ul class="product_right_rate">
									<li  v-for="v in item.content"  v-if="v.status == 1 || v.name == '信用卡消费'">{{(v.rate*100).toFixed(2)}}%</li>
								</ul>
							</li>
						</ul>
					</div>
				</div>
			</div>
		</div>
	</body>
		
	<script>
    var vm = new Vue({
        el: "#box",
        data: {
           prodList:[],
           rateList:[],
        },
        created: function () {
          var brand = sessionStorage.getItem(3);
		  var _this = this
        	 $.ajax({
                type: "GET",
                url: window.baseUrl+"user/thirdlevel/prod/brand/" + brand ,
                async: false,
                dataType: "json",
                data: {
                    access_type:0
                },
                success: function (data) {

                   _this.prodList = data.result
				  // console.log(_this.prodList)
                   for(var i=0;i<_this.prodList.length;i++){
                   	var id=data.result[i].id
                   	    $.ajax({
			                type: "POST",
			                url: window.baseUrl+"user/thirdlevel/rate/query/thirdlevelid",
			                async: false,
			                dataType: "json",
			                data: {
			                   thirdLevelId:id,
						      	access_type:2,
						      	brand_id:brand
			                },
			                success: function (data) {
			                	_this.rateList=data.result
			                	 // console.log(_this.rateList)
			                  _this.prodList[i].content = data.result
			                  console.log(data.result)
			                },
			                error: function (data) {
			                    console.log(data)
			                }
		           		})
                   }
                },
                error: function (data) {
                    console.log(data)
                }
            })
        },
        methods: {
        }
    })

	</script>
</html>


